<template>
	<div class="pt-[17px] px-[25px] md:px-[35px] pb-10">
		<table class="w-full table-fixed border-separate border-spacing-y-4">
			<tbody>
				<tr>
					<td class="text-t-2">{{ $t('wallet.currency') }}</td>
					<td>{{ result?.currency }}</td>
				</tr>
				<tr>
					<td class="text-t-2">{{ $t('wallet.depositMethod') }}</td>
					<td>{{ result?.payMethodName }}</td>
				</tr>
				<tr>
					<td class="text-t-2">{{ $t('recharge.amount') }}</td>
					<td class="text-success">
						{{ result?.currency }} {{ fmtBalance(result?.amount, result?.currency) }}
					</td>
				</tr>
				<tr>
					<td class="text-t-2">{{ $t('transactions.date') }}</td>
					<td>{{ format(result?.createTime || 0, 'p dd-MM-yyyy') }}</td>
				</tr>
				<tr>
					<td class="text-t-2">{{ $t('wallet.transaction.id') }}</td>
					<td>{{ result?.orderNo }}</td>
				</tr>
			</tbody>
		</table>
		<BaseButton
			class="mt-[17px]"
			type="primary"
			textT="deposit.result.completeDeposit"
			@click="onClick" />
		<div class="flex justify-center mt-4">
			<BaseCopy :value="copyText">
				<span class="flex items-center text-center text-sm text-primary app-text-react">
					<base-icon name="copy" size="16" />
					<span>&nbsp;{{ $t('deposit.result.copy') }}</span>
				</span>
			</BaseCopy>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { format } from 'date-fns'
import { BaseButton, BaseCopy, BaseIcon } from '@/components/base'
import { router } from '@/router'
import { useWalletStore } from '@/store'
import { fmtBalance, t } from '@/utils'

const walletStore = useWalletStore()
const result = computed(() => walletStore.submitFiatDepositResult)
const copyText = computed(() => {
	return `${t('wallet.currency')}: \t${result.value?.currency}
${t('wallet.depositMethod')}: \t${result.value?.payMethodName}
${t('recharge.amount')}: \t${result.value?.currency} ${fmtBalance(result.value?.amount, result.value?.currency)}
${t('transactions.date')}: \t${format(result.value?.createTime || 0, 'p dd-MM-yyyy')}
${t('wallet.transaction.id')}: \t${result.value?.orderNo}`
})

const onClick = async () => {
	// walletStore.submitFiatDepositResult = null
	walletStore.show.submitFiatDepositResult = false
	walletStore.setWalletDepositShow(false)
	await router.replace({ name: 'transactions.deposit' })
}
</script>

<style scoped></style>
